<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-time Chat</title>
</head>
<body>
<input type="text" id="messageInput" placeholder="Type your message">
<button onclick="sendMessage()">Send</button>
<div id="messages"></div>

<script>
        const socket = new WebSocket('ws://localhost:8080/ws');

        socket.onopen = function() {
            console.log('Connected to the WebSocket server');
        };

        socket.onmessage = function(event) {
            const messagesDiv = document.getElementById('messages');
            const p = document.createElement('p');
            p.textContent = event.data;
            messagesDiv.appendChild(p);
        };

        socket.onclose = function() {
            console.log('Disconnected from the WebSocket server');
        };

        function sendMessage() {
            const message = document.getElementById('messageInput').value;
            if (message) {
                socket.send(message);
                document.getElementById('messageInput').value = '';
            }
        }
    </script>
</body>
</html>